<template>
  <div class="homebox">
    <van-nav-bar left-arrow 		title="message" @click-left="$router.go(-1)">
    </van-nav-bar>
    <div style=" width: 100%; padding: 0px 0 80px 0">
      <van-list
        :offset="offset"
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="no more"
      >
        <div class="shop-content">
          <div class="shop-nav" v-for="ite in newsListData" :key="ite.id">
            <div
              style="
                display: flex;
                justify-content: space-between;
              "
              @click="$router.push({ name: 'Message', query: { data: ite } })"
            >
              <img
                :src="ite.image"
                style="width: 100px; height: 100px; margin-right: 10px"
              />
              <div style="text-align: left; width: 70%">
                <div
                  style="
                    color: #fff;
                    font-size: 16px;
                    margin-top: 10px;
                    margin-bottom: 20px;
                  "
                >
                  {{ ite.title }}
                </div>
                <div style="color: #c3c3c3; font-size: 14px">
                  {{ ite.create_time }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <van-popup v-model="popupshow">
      <div style="width: 300px; text-align: center">
        <div
          style="
            width: 100%;
            background: #3467ff;
            color: white;
            padding: 15px 0;
          "
        >
          收益封顶
        </div>
        <div style="width: 100%; height: 230px">
          <van-icon
            name="warning"
            color="red"
            size="60"
            style="margin-top: 15px"
          />
          <div style="width: 80%; margin: 10px auto">
            当前杠杆额度已少于500U 请及时升级或关注具体杠杆额度
          </div>
          <van-button
            type="info"
            style="width: 80%; margin-top: 20px"
            @click="popupshow = false"
            >确认</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Tabbar from "@/components/tabbar";
import {
  bannerList,
  indexrate,
  newsList,
  oindexrderList,
  userAccount,
} from "@/api/home";
import { userInfo } from "@/api/personal";

export default {
  data() {
    return {
      popupshow: false,
      newsListData: [],
      slides: [],
      creadlist: [],
      ratedata: [],
      currencylist: [],
      list: [
        {
          name: "1",
        },
        {
          name: "1",
        },
        {
          name: "1",
        },
        {
          name: "1",
        },
      ],
      arr: [],
      active: 0,
      loading: false,
      finished: true,
      offset: 5,
      noticelength: "",
      userInfo: [],
    };
  },
  components: {
    Tabbar,
  },
  created() {
    newsList().then((res) => {
      this.newsListData = res;
    });
  },
  methods: {
    gonoticeDea(item) {
      this.$router.push({
        name: "noticeDeatil",
        query: {
          item: JSON.stringify(item),
        },
      });
    },
    gourl(url) {
      window.location.href = url;
    },
    onLoad() {},
  },
};
</script>
<style lang="less" scoped>
// .van-nav-bar {
//   background: #326964;

//   /deep/.van-nav-bar__title {
//     color: #ffffff;
//   }

//   /deep/ .van-icon {
//     color: #ffffff;
//   }
// }
.goods-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}
/deep/.van-notice-bar__content {
  width: 100%;

  div {
    width: 100%;
  }
}

.butrex {
  color: #333333;
  background: #f8f7fc;
  width: 20%;
  padding: 14px 14%;
  border-radius: 5px;
  font-size: 12px;
  .text-box {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  img {
    width: 20px;
    height: 20px;
  }
}

.homebox {
  height: 100%;
  font-size: 14px;
}

.shop-content {
  padding: 10px 5px;

  [class*="shop-nav"]::after {
    border-bottom: 1px solid #c0c4cc;
  }

  .shop-nav {
    font-size: 13px;
    margin-top: 10px;
    margin: 10px 20px;
    color: #333;
    border-bottom: 1px solid #f8f8ff;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding-bottom: 15px;

    .text-tpye {
      padding: 0 7px;
    }

    img {
      border-radius: 10px 10px 0 0;
      width: 100%;
    }
  }
}

.notice-title {
  padding: 0 15px 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .notice {
    height: 15px;
    width: 50px;
  }

  .title {
    width: 100%;

    .van-notice-bar {
      font-size: 15px;
      height: 26px;
      padding: 0;
      background-size: 100% 100%;

      /deep/.van-ellipsis {
        height: 100%;

        .notice-swipe {
          width: 100%;
          height: 100%;
        }

        .van-swipe {
          height: 100%;
        }

        .van-swipe-item {
          height: 100%;
        }
      }
    }
  }
}

.myOrder {
  width: 100%;
  // height: 125.5px;

  border-radius: 5px;
  // margin: 17.5px auto 15px;

  .van-cell__title {
    color: #111;
    font-size: 14px;
  }

  .van-cell__value {
    color: #111;
    font-size: 11px;
  }

  .van-row {
    padding-top: 21px;
    color: white;
    font-size: 12px;
    text-align: center;

    img {
      width: 28px;
      height: 28px;
      margin-bottom: 10px;
    }
  }
}

.tools {
  width: 345px;
  height: 152.5px;
  border-radius: 5px;
  box-shadow: 0 0 2px #eee;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 19.5px 27.5px 15px;

  .van-cell {
    padding-left: 0;
  }

  .toolsTop {
    color: #111;
    font-size: 14px;
    margin-bottom: 10px;
  }

  img {
    width: 16px;
    height: 14.5px;
    margin: 5px 9.5px 0 0;
  }

  .locationIcon {
    width: 13px;
  }
}
</style>
